<template>
  <div >
	<!-- 引入菜单组件 -->
	<vNavlist />
	<!-- 实现首页 -->
	<div class="shuju">
		<!-- 学生成绩预警 -->
		<div class="one">
			<p class="title">学生成绩预警</p>
		</div>
		<!-- 教师各科人数 -->
		<div class="two">
			<p class="title">教师各科人数</p>
		</div>	
	</div>
  </div>
</template>

<script>
import vNavlist from "@/components/vNavlist.vue"
export default {
	name: 'vShuju',
	mounted(){
		this.mianji()
		this.bing();
		// 请求童话故事数据测试网络请求
		// this.$request()
		 var url = "https://route.showapi.com/1700-1?showapi_appid=100079&showapi_sign=9e038adb10ef4cf68db6bc8d0feed220";
            this.$request.post(url).then((res,body)=>{
				console.log(typeof res)
					// let data = JSON.parse(JSON.stringify(res.data));
					//注意打印的时候如果我们的代码中有加号运行符，
					// 在这种情况下，会先调用toString()方法，
					// 将其他类型的东西转化为字符串，再和原始字符串拼接成一个字符串。
                    //错误实例 console.log('数据是'+res.data.showapi_res_body.storylist);
                    console.log(res.data.showapi_res_body.storylist);
                }).catch((error)=>{
                    console.log(error);
                })
	},
	components:{
		vNavlist
	},
	data () {
		return {
		}
	},
	methods:{
		mianji(){
			let svg = d3.select('.one').append('svg').attr('width',500).attr('height',400);
			let g = svg.append('g').attr('transform','translate(50,50)');
			
			let data = [15,18,25,10,45,35,40,35,60,35];
			
			// 定义比例尺
			let scaleX = d3.scale.linear().domain([0,data.length]).range([0,400]);
			let scaleY = d3.scale.linear().domain([0,d3.max(data)]).range([300,0])
			
			// 获取曲线构造器
			let area = d3.svg.area()
				.x((d,i)=>{
					return scaleX(i)+40
				})
				.y((d,i)=>{
					return 300;
				})
				.y1((d,i)=>{
					return scaleY(d)
				}).interpolate("cardinal");
			// 绘制面积曲线
			g.append('path').attr('d',area(data)).attr('fill','steelblue').attr('stroke','orange')
			// 添加文本
			g.selectAll('text').data(data).enter()
				.append('text')
				.attr('x',(d,i)=>{
					return scaleX(i)+40
				})
				.attr('y',(d,i)=>{
					return scaleY(d)
				})
				.text((d)=>{
					return d
				})
				.attr('fill','yellow')
				
			// 添加坐标
			let x = d3.svg.axis().scale(scaleX);
			let y = d3.svg.axis().scale(scaleY).orient('left');
			
			g.append('g').attr('class','axis').call(x).attr('transform','translate(0,300)')
			g.append('g').attr('class','axis').call(y)
		},
		bing(){
			let svg  = d3.select('.two').append('svg').attr('width',500).attr('height',400)
			
			let data = [20,35,15,60,55,30]
			
			// 转换数据
			let pie = d3.layout.pie();
			let pieData = pie(data);
			
			// 定义弧生成器
			let outer = 150;
			let inner = 0;
			let arc = d3.svg.arc()
						.outerRadius(outer)
						.innerRadius(inner)
			//追加g
			let arcs = svg.selectAll('g').data(pieData).enter()
							.append('g')
							.attr('transform','translate(250,200)')
			// 定义颜色器
			let color = d3.scale.category10();
			
			// 绘制曲线路径
			arcs.append('path')
				.attr('d',(d,i)=>{
					return arc(d)
				})
				.attr('fill',(d,i)=>{
					return color(i)
				})
				
			// 填充文本
			arcs.append('text')
				.attr('transform',(d,i)=>{
						return "translate("+arc.centroid(d)+")"
				})
				.attr('text-anchor','middle')
				.attr('fill','white')
				.text((d)=>{
					return d.data
				})
				
		}
	}
}
</script>;

let data = [15,18,25,10,45,35,40,35,60,35];

<style>
	.shuju{
		height: 500px;
		margin: 50px 10px;
		display: flex;
		justify-content: space-between;
	}
	.one,.two{
		position: relative;
		width: 49%;
		background-color: #DDD;
	}
	.title{
		border-bottom: 4px solid white;
		line-height: 40px;
		font-weight: bold;
	}
	.axis line,.axis path{
		fill: none;
		stroke: black;
	}
	svg{
		position: absolute;
		top: 40px;
		bottom:0;
		left: 0;
		right: 0;
		margin: auto;
	}
</style>
